:root,
:root.dark {
  /* --el-font-size-base: 14px;
  --el-font-size-small: 16px;
  --el-font-size-large: 18px; */

  --el-color-primary: rgba(var(--color-primary), 1);
  --el-color-primary-dark-2: rgba(var(--color-primary-600), 1);
  --el-color-primary-light-1: rgba(var(--color-primary-400), 1);
  --el-color-primary-light-2: rgba(var(--color-primary-400), 1);
  --el-color-primary-light-3: rgba(var(--color-primary-300), 1);
  --el-color-primary-light-4: rgba(var(--color-primary-300), 1);
  --el-color-primary-light-5: rgba(var(--color-primary-200), 1);
  --el-color-primary-light-6: rgba(var(--color-primary-200), 1);
  --el-color-primary-light-7: rgba(var(--color-primary-100), 1);
  --el-color-primary-light-8: rgba(var(--color-primary-100), 1);
  --el-color-primary-light-9: rgba(var(--color-primary-50), 1);
}

:root.dark.dark {
  --el-color-primary: rgba(var(--color-primary-400), 1);
}

.el-tabs-flex {
  @apply flex flex-col h-full !important;

  .el-tabs__header {
    @apply flex-none !important;
  }

  .el-tabs__content {
    @apply flex-grow overflow-hidden h-full !important;
  }

  .el-tab-pane {
    @apply h-full overflow-auto;
  }
}

.el-dialog-flex {
  height: calc(100% - 20vh - 8px) !important;
  @apply flex flex-col !my-[10vh];
  .el-dialog__header,
  .el-dialog__footer {
    @apply flex-none;
  }
  .el-dialog__body {
    @apply flex-1 !h-0;
  }
}

.el-dialog-headless {
  .el-dialog__header,
  .el-dialog__footer {
    @apply !hidden;
  }

  .el-dialog__body {
    @apply !p-0;
  }
}
